<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body onload="startTest()">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
  <defs>
      <rect id="target" fill="green" width="100" height="100"/>
  </defs>
  <use id="test" xlink:href="#target"/>
</svg>

<div id="console">Test failed</div>

<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

function eventHandler()
{
    var divElement = document.getElementById("console");
    divElement.textContent = "Test passed";

    if (window.testRunner)
        testRunner.notifyDone();
}

function fireSimulatedMouseClickEvent(eventTarget)
{
    var event = new MouseEvent("click", { composed: true, bubbles: true });
    eventTarget.dispatchEvent(event);
}

function startTest() {
    var useElement = document.getElementById("test");

    var shadowRoot = internals.shadowRoot(useElement);

    // No-op, as no listener is not yet registered
    fireSimulatedMouseClickEvent(shadowRoot.firstChild);

    // Add listener
    shadowRoot.firstChild.addEventListener("click", eventHandler, false);

    // Should fire immediately and finish the test
    fireSimulatedMouseClickEvent(shadowRoot.firstChild);
}
</script>

</body>
</html>
